<template>
  <div class>
    <div class="title">
      <span class="title_big">文档管理-列表</span>
    </div>
    <el-form
      size="mini"
      :inline="true"
      :model="searchForm"
      class="demo-form-inline search"
    >
      <el-form-item label="标题">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="专题">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="关键词">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="发布人">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input
          v-model="searchForm.realname"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-date-picker
        style="height:40px"
        v-model="value1"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-form-item label="优先级">
        <el-select
          size="mini"
          v-model="searchForm.memberGroup"
          clearable
          placeholder="请选择"
        >
          <el-option value="wu"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性">
        <el-select
          size="mini"
          v-model="searchForm.type"
          clearable
          placeholder="请选择"
        >
          <el-option value="wu"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限范围">
        <el-select
          size="mini"
          v-model="searchForm.status"
          clearable
          placeholder="请选择"
        >
          <el-option value="审核"></el-option>
          <el-option value="待审核"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button size="mini" type="info">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="filter">
      <div><el-button type="info" @click="editUser">新增</el-button></div>
      <!-- <div><el-button type="info">修改</el-button></div>
      <div><el-button type="info">移动</el-button></div>
      <div><el-button type="info">删除</el-button></div>
      <el-button type="info" style="margin-left: 20px;">审核通过</el-button>
      <el-button type="info" style="margin-left: 5px;">撤销审核</el-button> -->
    </div>
    <div>
      <!-- <div class="filter_son">
        <div>所有</div>
        <div>待审</div>
        <div>审核中</div>
        <div>待发布</div>
        <div>已发布</div>
        <div>已过期</div>
        <div>草稿</div>
      </div> -->
      <el-table
        :data="from"
        style="width: 100%"
        :default-sort="{ prop: 'createdtime', order: 'descending' }"
      >
        <el-table-column type="selection" label="全选"></el-table-column>
        <el-table-column
          prop="infoId"
          label="ID"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column
          prop="createdtime"
          label="发布时间"
          sortable
          width="220"
        ></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="priority"
          label="优先级"
          sortable
          width="120"
        ></el-table-column>
        <el-table-column
          prop="views"
          label="点击"
          sortable
          width="120"
        ></el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">无</span>
            <span v-if="scope.row.status == 1">待发布</span>
            <span v-if="scope.row.status == 2">审核中</span>
            <span v-if="scope.row.status == 3">撤销发布</span>
            <span v-if="scope.row.status == 4">草稿回收站</span>
            <span v-if="scope.row.status == 5">审核未</span>
            <span v-if="scope.row.status == 6">草稿</span>
            <span v-if="scope.row.status == 7">草稿</span>
            <span v-if="scope.row.status == 8">草稿</span>
            <span v-if="scope.row.status == 9">草稿</span>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope"
            ><el-button type="text">查看</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text" @click="delDom(scope.row.infoId)"
              >删除</el-button
            ></template
          >
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSize"
        @current-change="handlePage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <Drawer :isDrawer.sync="isDrawer" :title="'文档管理-新增'" :size="'80%'">
      <Manage ref="add"></Manage>
      <template #footer>
        <el-button size="medium" @click="closeDrawer">取消</el-button>
        <el-button type="primary" size="medium" @click="addMent"
          >保存</el-button
        >
      </template>
    </Drawer>
  </div>
</template>

<script>
import Drawer from "@/components/drawer";
import Manage from "./components/Manage.vue";
import * as api from "./api";
export default {
  components: {
    Drawer,
    Manage
  },
  data() {
    return {
      searchForm: {
        realname: "",
        orgname: "",
        role: "",
        memberGroup: "",
        type: "",
        status: ""
      },
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      input: "",
      handleSize: "",
      handlePage: "",
      isDrawer: false,
      userForm: [], //用户列表
      total: null, //总条数
      page: 1, //页数
      size: 10, //条数
      direction: "rtl",
      value1: "",
      from: []
    };
  },
  created() {
    this.domList();
  },
  methods: {
    //文章新增
    addMent() {
      this.$refs.add.addMent();
      this.domList();
      this.closeDrawer();
    },
    //文章删除
    async delDom(id) {
      api.deleart({ infoId: id }).then(res => {
        this.domList();
      });
    },
    //文章列表
    domList() {
      api.Article().then(res => {
        this.from = res.data.list;
      });
    },
    editUser() {
      this.isDrawer = true;
    },
    closeDrawer() {
      this.isDrawer = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding: 13px 10px 0;
  margin: 20px 0 30px;
  .el-select {
    width: 100px;
  }
}
.completely {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.delete {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.modify {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.copy {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.notyet {
  color: rgba(104, 120, 240, 1);
}
.already {
  color: rgba(104, 120, 240, 1);
}
.eject {
  margin-top: 20px;
}
.label_three {
  color: rgba(255, 164, 43, 1);
  margin-left: 20px;
}

.label_two {
  color: rgba(104, 120, 240, 1);
  margin-left: 20px;
}
.label_one {
  color: rgba(251, 83, 75, 1);
}
.filter_son > div {
  width: 70px;
  height: 26px;
  border: 1px solid;
  border-color: #be1015;
  border-radius: 5px 5px 0px 0px;
  margin-left: 5px;
  text-align: center;
  line-height: 26px;
  transition: all 0.5s;
}
.filter_son > div:hover {
  background-color: #be1015;
  color: #ffffff;
}
.filter_son {
  display: flex;
  margin-left: -5px;
  margin-top: 30px;
}
.filter > div {
  width: 56px;
  height: 24px;
  background-color: #6878f0;
  border-radius: 5px;
  box-shadow: 0px 0px 6px rgba(0, 12, 100, 0.2);
  margin-left: 20px;
}
.filter {
  display: flex;
  margin-left: -20px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.dropdown_top > div > span {
  width: 70px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 18px;
  line-height: 30px;
}
.dropdown_top > div {
  display: flex;
  width: 150px;
  height: 24px;
  text-align: center;
  margin-left: 10px;
}
.dropdown_top {
  display: flex;
  margin-left: 15px;
  padding-top: 15px;
}
.dropdown {
  width: 1615px;
  height: 70px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  margin-top: 20px;
}
.title_small {
  width: 73px;
  height: 16px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
}
.title_big {
  width: 153px;
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 24px;
}
.title {
  margin-left: 20px;
  margin-top: 40px;
}
#angry {
  height: 20px;
}
</style>
